<template>
	<zui-box>

		<!-- 头部导航 -->
		<!-- <zui-navbar title=''></zui-navbar> -->
		<view class="navbar">
			<u-navbar :fixed="true" title=" " @leftClick="xz_back()" @rightClick="right_fun" :safeAreaInsetTop="true"
				bgColor="rgb(131, 28, 25)" title-color="white">
				<view class="u-nav-slot" slot="left">
					<u-icon color="#ffffff" name="arrow-left" size="19"></u-icon>
				</view>
				<view class="u-nav-slot" slot="right">
					<view class="right_text">
						删除地址
					</view>
				</view>
				<view class="title" slot="center">
					编辑地址
				</view>
			</u-navbar>
		</view>

		<u-form>
			<u-gap height="30rpx"></u-gap>


			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i01.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>收货人</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<u-input v-model="name" shape='circle' placeholder="请输入收货人姓名" border="none" color='#fff' clearable>
					</u-input>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>


			<u-gap height="30rpx"></u-gap>

			<!-- //平面盒子 -->

			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i02.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>手机号</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<u-input v-model="phone"  maxlength="11" shape='circle' placeholder="请输入收货人手机号" border="none" color='#fff'
						clearable>
					</u-input>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>

			<u-gap height="30rpx"></u-gap>


			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i03.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>所在地区</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<view @tap="showCityPicker">
						<u-input v-model="address_join" :readonly="true" shape='circle' placeholder="选择省市区"
							border="none" color='#fff' clearable>
						</u-input>
					</view>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>

			<u-gap height="30rpx"></u-gap>


			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i03.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>详细地址</zui-text>
				</zui-start>
				<zui-col padding="0" height='auto'>
					<view class="opt" @click="opt_ress">
						<u-form-item>
							<u-input v-model="address" disabled disabledColor="#ffffff" placeholder="其他" border="none">
							</u-input>
							<u-icon slot="right" name="arrow-down"></u-icon>
						</u-form-item>
					</view>

					<zui-line v-if="!address"></zui-line>

				<zui-start padding="15rpx" v-if="!address">
					<u-input v-model="address2" shape='circle' placeholder="请输入详细地址" border="none" color='#fff'
						clearable>
					</u-input>
				</zui-start>
				

					<u-picker keyName="address" :closeOnClickOverlay='true' :show="showSex" @close='closeSex'
						@cancel='closeSex' @confirm='confirm' :columns="columns"></u-picker>

				</zui-col>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>



			<u-gap height="30rpx"></u-gap>

			<zui-flat v-if="team_person">
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i01.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>团队人员</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<u-input v-model="team_person" :readonly="true" shape='circle' border="none" color='#fff'></u-input>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>
			<!-- //平面盒子 -->

		</u-form>


		<u-gap height="70rpx"></u-gap>


		<zui-button bgColor='#AA334F' @fun='save'>保存</zui-button>


		<!-- 重新起了个名字 -->
		<uni-city ref="unicity" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onCancel="onCancel"
			@onConfirm="onConfirm"></uni-city>


	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				the_id: '',
				name: '', //收货人
				phone: '', //手机号

				pro_name: '',
				city_name: '',
				area_name: '',
				pro_id: '',
				city_id: '',
				area_id: '',
				pickerValueDefault: [0, 0, 1],
				address_join: '', //省市区
				address: '', //详细地址
				address2: '', //详细地址
				is_default: 1, //是否默认
				addressShow: false,

				showSex: false,

				sex: '',
				columns: [],

				team_person: '', //团队人员
			};
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			this.the_id = e.id;
			console.log('获取的id', this.the_id);
			this.get_info()
		},
		created() {},
		methods: {
			right_fun() {


				// 保存地址
				uni.$u.http.post('/app/address/delete', {
						id: this.the_id,

					}, {
						custom: {
							auth: true,
							toast: true,
							catch: false,
						}
					}

				).then(res => {

					//加入购物车成功
					this.say('删除成功');
					this.xz_back();

				}).catch(err => {})


			},

			get_info() {

				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http.get('/app/address/detail', {
					params: {
						id: this.the_id
					},
					custom: {
						auth: true,
						toast: true,
						catch: false,
					}
				}).then(res => {

					this.pro_id = res.pro_id;
					this.city_id = res.city_id;
					this.area_id = res.area_id;
					this.pro_name = res.pro_name;
					this.city_name = res.city_name;
					this.area_name = res.area_name;
					this.address_join = res.pro_name + '-' + res.city_name + '-' + res.area_name;
					this.address = res.address;
					this.name = res.name;
					this.phone = res.phone;
					this.is_default = res.is_default;
					this.team_person = res.team_person;

					this.get_team();
					


				}).catch(err => {})
			},


			// 选择街道
			opt_ress() {
				if (this.columns[0]?.length > 0) {
					console.log(this.columns)
					this.showSex = true;
				}

			},
			showCityPicker: function() {
				this.$refs.unicity.show();
			},
			onChange(e) {},
			onCancel(e) {},
			onConfirm(e) {
				console.log('地址', e);
				this.address_join = e.label;
				this.pro_id = `${e.sheng}0000`;
				this.city_id = `${e.shi}00`;
				this.area_id = e.qu;

				this.pro_name = e.sheng_name;
				this.city_name = e.shi_name;
				this.area_name = e.qu_name;
				this.get_team();
				this.address='';
				this.address2='';
				this.team_person='';
			},
			closeSex() {
				this.showSex = false;
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.address = e.value[0].address;
				this.team_person = e.value[0].team_person;
				this.showSex = false;
			},
			//team_person:'',//团队人员
			get_team() {
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http.get('/app/address/listAdmin', {
					params: {
						pro_id: this.pro_id,
						city_id: this.city_id,
						area_id: this.area_id,
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					console.log('获取分类', res);
					this.columns = [];
					this.columns.push(res);


					// address: "软件园"
					// team_person: "20"


					// this.team_person = res;
				}).catch(err => {

				})


			},

			save() {
				// 保存地址
				uni.$u.http.post('/app/address/edit', {
						id: this.the_id,
						pro_id: this.pro_id,
						city_id: this.city_id,
						area_id: this.area_id,

						pro_name: this.pro_name,
						city_name: this.city_name,
						area_name: this.area_name,
						address: this.address || this.address2,
						name: this.name,
						phone: this.phone,
						is_default: this.is_default,
						team_person: this.team_person,

					}, {
						custom: {
							auth: true,
							toast: true,
							catch: false,
						}
					}

				).then(res => {

					//加入购物车成功
					this.say('保存成功')
					this.xz_back()


				}).catch(err => {})




			},

			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
		}
	}
</script>

<style lang='scss' scoped>
	/* //自定义顶部栏 */
	.navbar {
		font-size: 30rpx;

		/deep/.title {
			color: #fff;
		}

		/deep/.u-icon {
			padding: 10rpx;
			border-radius: 50%;
			// background:rgba(35 ,159 ,229,0.85);
		}

		.right_text {
			color: #fff;
		}
	}

	.u-icon__img {
		width: 24rpx !important;
		height: 24rpx !important;
	}



	.cell {
		/deep/.u-cell__body {
			padding: 0 !important;
		}

		/deep/.u-cell__title-text {
			color: #F1B863 !important;
		}
	}


	/deep/.u-input__content__field-wrapper__field {
		height: 60rpx !important;
		color: #666 !important;
		font-size: 26rpx !important;
	}


	/deep/.u-input {
		background-color: transparent !important;
		font-size: 24rpx !important;
	}
</style>
